<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品小计</title>
</head>
<body>
    <img src="./img/pic1.jpg" alt=""><br>
    数量：<input type="button" value="-" id="cutNum">
    <input type="text" value="1" id="num">
    <input type="button" value="+" id="addNum">（库存量6）<br>
    <p>单价：￥<span id="price">99</span> <br></p>
    <p>总价：￥<b id="total">99</b></p>
</body>
<script>
    /*
        需求：通过按钮控制数量的变化，数量变化引起总价变化
    */

    //1.找节点
    //复制：shift+alt+下键
    //注释：ctrl+/
    var cutNum = document.getElementById('cutNum');
    var num = document.getElementById('num');
    var addNum = document.getElementById('addNum');
    var price = document.getElementById('price');
    var total = document.getElementById('total');

    //2.点击按钮的时候改变数量
    cutNum.onclick = function() {
        //3.点击减号，把数量减一
        var nowNum = num.value;
        if(nowNum > 1) {
            //数量大于1，减一
            num.value = nowNum - 1;
            var priceNum = price.innerHTML;//普通节点获取和设置值：innerHTML(渲染的时候可以把节点渲染出来) innerText（渲染纯文本）
            // console.log(priceNum);//99
            total.innerHTML = (nowNum - 1) * priceNum;//数量*单价
        }else{
            //数量小于1，不给减1
            
            alert('已经是最小值');//阻塞后续代码执行。工作中比较少用，检验代码的时候可以用来测试代码逻辑
        }
    }

    //数量加1
    addNum.onclick = function() {
        var nowNum = num.value;//取到的值是字符串
        if(nowNum < 6) {
            //小于库存量，继续加1
            num.value = parseInt(nowNum) + 1;
            var priceNum = price.innerHTML;//普通节点获取和设置值：innerHTML(渲染的时候可以把节点渲染出来) innerText（渲染纯文本）
            // console.log(priceNum);//99
            total.innerHTML = (parseInt(nowNum) + 1) * priceNum;//数量*单价
            // console.log((nowNum + 1) * priceNum);
        }else{
            //等于库存量
            alert('已经没有库存量了');
        }
    }

</script>
</html>